<script setup lang="ts">
import { ref, watch } from 'vue'
import CollapsiblePanel from './common/CollapsiblePanel.vue'
import ToggleButton from './common/ToggleButton.vue'
import InputField from './common/InputField.vue'
import CopyToClipboard from './common/CopyToClipboard.vue'

// 导入公共样式


// 接收从App.vue传入的landType参数
const props = defineProps<{
  landType: string // 'single' 表示单独选址，'batch' 表示批次用地
}>()

// 表单数据状态定义
const landPlanningForm = ref({
  // 共同部分
  国土空间规划审查机关: '',
  市县国土空间总体规划名称: '',
  
  // 单独选址部分
  选址情况类型: '1', // 1: 完全在规划范围外, 2: 部分在规划范围外
  自然保护区情况: '否', // 是/否
  自然保护区名称: '',
  自然保护区用地面积: '',
  穿越保护区情况: '', // 实验区/缓冲区/核心区
  生态保护红线情况: '否', // 是/否
  生态保护红线面积: '',
  允许活动类型: '',
  涉及生态红线类型: '', // 允许有限人为活动/重大项目占用
  
  // 批次用地部分
  审查机关: '',
  用途列表: [
    { name: '', area: '' }
  ],
  位于保护区: '否', // 是/否
  保护区名称: '',
  保护区面积: '',
  主管部门: '',
  保护区批复文号: ''
})

// 监听landType变化
watch(() => props.landType, (newType) => {
  // 当landType变化时，可以根据需要重置或更新表单数据
  console.log('用地类型切换为:', newType)
}, { immediate: true })

// 动态添加用途
const addUsageItem = () => {
  landPlanningForm.value.用途列表.push({ name: '', area: '' })
}

// 移除用途
const removeUsageItem = (index: number) => {
  if (landPlanningForm.value.用途列表.length > 1) {
    landPlanningForm.value.用途列表.splice(index, 1)
  }
}

// 生成要复制的文本
const generateCopyText = (): string => {
  let paragraph: string = ''
  
  // 根据landType生成不同的文本
  if (props.landType === 'single') {
    // 单独选址
    paragraph += `[符合规划情况]\n`
    
    if (landPlanningForm.value.选址情况类型 === '1') {
      paragraph += `项目位于国土空间规划确定的城市和村庄、集镇建设用地范围外`
      if (landPlanningForm.value.国土空间规划审查机关 && landPlanningForm.value.国土空间规划审查机关.trim()) {
        paragraph += `【或：项目用地位于${landPlanningForm.value.国土空间规划审查机关}审查通过的国土空间规划确定的城市和村庄、集镇建设用地范围外】`
      }
      paragraph += `，属单独选址建设用地项目。\n\n`
    } else {
      paragraph += `项目用地部分位于国土空间规划确定的城市和村庄、集镇建设用地范围外，部分位于城村建设用地范围内`
      if (landPlanningForm.value.国土空间规划审查机关 && landPlanningForm.value.国土空间规划审查机关.trim()) {
        paragraph += `【或：项目用地部分位于${landPlanningForm.value.国土空间规划审查机关}审查通过的国土空间规划确定的城市和村庄、集镇建设用地范围外，部分位于城镇村建设用地范围内】`
      }
      paragraph += `，按单独选址建设项目用地报批。\n\n`
    }
    
    const planName = landPlanningForm.value.市县国土空间总体规划名称 || '';
    paragraph += `项目用地已纳入经批准的《${planName}（2021-2035年）》`
    if (landPlanningForm.value.国土空间规划审查机关 && landPlanningForm.value.国土空间规划审查机关.trim()) {
      paragraph += `【或：${landPlanningForm.value.国土空间规划审查机关}审查通过的《${planName}（2021-2035年）》，有关部门和单位对项目用地无颠覆性意见】`
    }
    paragraph += `：\n\n`
    
    // 自然保护区情况
    if (landPlanningForm.value.自然保护区情况 === '否') {
      paragraph += `不位于各级自然保护区`
    } else {
      if (landPlanningForm.value.穿越保护区情况) {
        paragraph += `该项目穿越/跨越自然保护区${landPlanningForm.value.穿越保护区情况}，已经国家或省级林业和草原主管部门同意；在自然保护区范围内不申请用地`
      } else {
        paragraph += `该项目用地/部分用地位于${landPlanningForm.value.自然保护区名称}${landPlanningForm.value.穿越保护区情况}范围内，用地面积${landPlanningForm.value.自然保护区用地面积}公顷，均位于国家或省级林业和草原主管部门同意的用地范围内`
      }
    }
    paragraph += `，\n\n`
    
    // 生态保护红线情况
    if (landPlanningForm.value.生态保护红线情况 === '否') {
      paragraph += `不位于生态保护红线范围内`
    } else {
      if (landPlanningForm.value.允许活动类型) {
        paragraph += `项目穿越/跨越生态保护红线，在生态保护红线范围内不申请用地`
      } else {
        paragraph += `项目用地涉及生态保护红线，符合生态保护红线内自然保护地核心保护区外、允许有限人为活动中的${landPlanningForm.value.允许活动类型 || landPlanningForm.value.涉及生态红线类型}类型，已出具符合生态保护红线内允许有限人为活动认定意见或不可避让生态保护红线的论证意见；涉及生态保护红线面积${landPlanningForm.value.生态保护红线面积}公顷，均位于省人民政府出具的认定意见或论证意见范围内`
      }
    }
  } else {
    // 批次用地
    paragraph += `[符合规划情况]\n`
    const batchPlanName = landPlanningForm.value.市县国土空间总体规划名称 || '';
    paragraph += `该批次用地符合《${batchPlanName}国土空间总体规划（2021-2035年）》`
    if (landPlanningForm.value.审查机关 && landPlanningForm.value.审查机关.trim()) {
      paragraph += `【或：${landPlanningForm.value.审查机关}审查通过的《${batchPlanName}国土空间总体规划（2021-2035年）》，有关部门和单位对项目用地无颠覆性意见】`
    }
    paragraph += `，位于国土空间规划确定的城镇建设用地范围内。不涉及生态保护红线，未突破城镇开发边界分阶段控制总量。\n\n`
    
    // 用途列表
    paragraph += `申请土地用途为：`
    const validUses = landPlanningForm.value.用途列表.filter(item => item && item.name && item.name.trim() && item.area && item.area.trim()) as Array<{name: string, area: string}>
    if (validUses.length > 0) {
      paragraph += `${validUses[0]!.name}用地${validUses[0]!.area}公顷`
      for (let i = 1; i < validUses.length; i++) {
        paragraph += `、${validUses[i]!.name}用地${validUses[i]!.area}公顷`
      }
      paragraph += `。\n\n`
    } else {
      paragraph += `（暂无有效用途信息）。\n\n`
    }
    
    // 保护区情况
    paragraph += `该批次用地`
    if (landPlanningForm.value.位于保护区 === '否') {
      paragraph += `均不位于各级保护区`
    } else {
      paragraph += `位于${landPlanningForm.value.保护区名称}保护区，涉及${landPlanningForm.value.保护区面积}公顷，已经${landPlanningForm.value.主管部门}同意（批准文号：${landPlanningForm.value.保护区批复文号}）`
    }
  }
  
  return paragraph
}
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold text-blue-700 text-center mb-6">国土空间规划单元</h1>
    
    <!-- 文件原文（可折叠） -->
    <CollapsiblePanel title="文件原文">
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">一、业务指导处室</h3>
        <p class="text-gray-600">国土空间规划局</p>
      </div>
      
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">二、审查标准</h3>
        <ol class="list-decimal pl-5 text-gray-600 space-y-2">
          <li>符合国土空间规划。</li>
          <li>项目涉及生态保护红线的，应符合《自然资源部生态环境部国家林业和草原局关于加强生态保护红线管理的通知(试行)》(自然资发(2022)142号)有关要求，并取得省政府出具的认定意见或不可避让论证意见。</li>
        </ol>
      </div>
    </CollapsiblePanel>
    
    <!-- 审查内容模板 -->
    <div class="border border-gray-200 rounded-lg shadow mb-6 bg-white text-left">
      <div class="bg-gray-50 p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">三、审查内容模板</h2>
        <div class="mt-2 text-sm text-gray-500">当前模式：{{ landType === 'single' ? '单独选址' : '批次用地' }}</div>
      </div>
      
      <div class="p-4">
        <!-- 单独选址模式 -->
        <div v-if="landType === 'single'" class="section-block blue">
          <h3 class="text-lg font-semibold text-gray-800 mb-3">单独选址</h3>
          
          <div class="text-gray-700 space-y-4">
            <p>[符合规划情况]</p>
            
            <div class="mt-3">
              <h4 class="font-semibold mb-2">选址情况</h4>
              <div class="flex items-center">
                <ToggleButton 
                  v-model="landPlanningForm.选址情况类型" 
                  :options="[
                    { label: '完全在规划范围外', value: '1' },
                    { label: '部分在规划范围外', value: '2' }
                  ]" 
                />
              </div>
            </div>
            
            <div class="ml-4 pl-4 text-blue-800 mt-2">
              <p v-if="landPlanningForm.选址情况类型 === '1'">
                项目位于国土空间规划确定的城市和村庄、集镇建设用地范围外
                <span v-if="landPlanningForm.国土空间规划审查机关">
                  【或：项目用地位于
                  <InputField v-model="landPlanningForm.国土空间规划审查机关" placeholder="国土空间规划审查机关" width="15rem" />
                  审查通过的国土空间规划确定的城市和村庄、集镇建设用地范围外】
                </span>
                ，属单独选址建设用地项目。
              </p>
              <p v-else>
                项目用地部分位于国土空间规划确定的城市和村庄、集镇建设用地范围外，部分位于城村建设用地范围内
                <span v-if="landPlanningForm.国土空间规划审查机关">
                  【或：项目用地部分位于
                  <InputField v-model="landPlanningForm.国土空间规划审查机关" placeholder="国土空间规划审查机关" width="15rem" />
                  审查通过的国土空间规划确定的城市和村庄、集镇建设用地范围外，部分位于城镇村建设用地范围内】
                </span>
                ，按单独选址建设项目用地报批。
              </p>
            </div>
            
            <div class="ml-4 pl-4 text-blue-800">
              <p>
                项目用地已纳入经批准的《
                <InputField v-model="landPlanningForm.市县国土空间总体规划名称" placeholder="市县国土空间总体规划名称" width="20rem" />
                （2021-2035年）》
                <span v-if="landPlanningForm.国土空间规划审查机关">
                  【或：
                  <InputField v-model="landPlanningForm.国土空间规划审查机关" placeholder="国土空间规划审查机关" width="15rem" />
                  审查通过的《
                  <InputField v-model="landPlanningForm.市县国土空间总体规划名称" placeholder="市县国土空间总体规划名称" width="20rem" />
                  （2021-2035年）》，有关部门和单位对项目用地无颠覆性意见】
                </span>
                ：
              </p>
            </div>
            
            <!-- 自然保护区情况 -->
            <div class="mt-4">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="landPlanningForm.自然保护区情况" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">涉及自然保护区：</label>
              </div>
            </div>
            
            <div v-if="landPlanningForm.自然保护区情况 === '否'" class="ml-4 pl-4 text-blue-800">
              <p>不位于各级自然保护区</p>
            </div>
            
            <div v-else class="ml-4 pl-4 text-blue-800">
              <div class="mb-2">
                <ToggleButton 
                  v-model="landPlanningForm.穿越保护区情况" 
                  :options="[
                    { label: '不申请用地', value: '实验区' },
                    { label: '申请用地', value: '' }
                  ]" 
                />
                <label class="section-label red ml-2">穿越/跨越保护区：</label>
              </div>
              
              <p v-if="landPlanningForm.穿越保护区情况">
                该项目穿越/跨越自然保护区实验区，已经国家或省级林业和草原主管部门同意；在自然保护区范围内不申请用地。
              </p>
              <p v-else>
                该项目用地/部分用地位于
                <InputField v-model="landPlanningForm.自然保护区名称" placeholder="自然保护区名称" width="15rem" />
                实验区范围内，用地面积
                <InputField v-model="landPlanningForm.自然保护区用地面积" type="number" step="0.01" min="0" placeholder="面积" width="8rem" />
                公顷，均位于国家或省级林业和草原主管部门同意的用地范围内。
              </p>
            </div>
            
            <!-- 生态保护红线情况 -->
            <div class="mt-4">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="landPlanningForm.生态保护红线情况" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">涉及生态保护红线：</label>
              </div>
            </div>
            
            <div v-if="landPlanningForm.生态保护红线情况 === '否'" class="ml-4 pl-4 text-blue-800">
              <p>不位于生态保护红线范围内</p>
            </div>
            
            <div v-else class="ml-4 pl-4 text-blue-800">
              <div class="mb-2">
                <ToggleButton 
                  v-model="landPlanningForm.允许活动类型" 
                  :options="[
                    { label: '不申请用地', value: '穿越跨越' },
                    { label: '申请用地', value: '' }
                  ]" 
                />
                <label class="section-label red ml-2">穿越/跨越生态保护红线：</label>
              </div>
              
              <p v-if="landPlanningForm.允许活动类型">
                项目穿越/跨越生态保护红线，在生态保护红线范围内不申请用地。
              </p>
              <p v-else>
                项目用地涉及生态保护红线，符合生态保护红线内自然保护地核心保护区外、允许有限人为活动中的
                <InputField v-model="landPlanningForm.允许活动类型" placeholder="允许活动类型" width="15rem" />
                类型或重大项目占用类型，已出具符合生态保护红线内允许有限人为活动认定意见或不可避让生态保护红线的论证意见；涉及生态保护红线面积
                <InputField v-model="landPlanningForm.生态保护红线面积" type="number" step="0.01" min="0" placeholder="面积" width="8rem" />
                公顷，均位于省人民政府出具的认定意见或论证意见范围内。
              </p>
            </div>
          </div>
        </div>
        
        <!-- 批次用地模式 -->
        <div v-else class="section-block green">
          <h3 class="text-lg font-semibold text-gray-800 mb-3">批次用地</h3>
          
          <div class="text-gray-700 space-y-4">
            <p>[符合规划情况]</p>
            
            <div class="ml-4 pl-4 text-blue-800">
              <p>
                该批次用地符合《
                <InputField v-model="landPlanningForm.市县国土空间总体规划名称" placeholder="市县国土空间总体规划名称" width="20rem" />
                国土空间总体规划（2021-2035年）》
                <span v-if="landPlanningForm.审查机关">
                  【或：
                  <InputField v-model="landPlanningForm.审查机关" placeholder="审查机关" width="15rem" />
                  审查通过的《
                  <InputField v-model="landPlanningForm.市县国土空间总体规划名称" placeholder="市县国土空间总体规划名称" width="20rem" />
                  国土空间总体规划（2021-2035年）》，有关部门和单位对项目用地无颠覆性意见】
                </span>
                ，位于国土空间规划确定的城镇建设用地范围内。不涉及生态保护红线，未突破城镇开发边界分阶段控制总量。
              </p>
            </div>
            
            <div class="ml-4 pl-4 text-blue-800 mt-3">
              <p>申请土地用途为：</p>
              <div v-for="(use, index) in landPlanningForm.用途列表" :key="index" class="flex items-center mt-2">
                <InputField v-model="use.name" placeholder="用途" width="10rem" />
                <span class="mx-2">用地</span>
                <InputField v-model="use.area" type="number" step="0.01" min="0" placeholder="面积" width="8rem" />
                <span class="mx-2">公顷</span>
                <button 
                  v-if="landPlanningForm.用途列表.length > 1" 
                  @click="removeUsageItem(index)" 
                  class="ml-2 text-red-500 hover:text-red-700"
                >
                  删除
                </button>
                <button 
                  v-if="index === landPlanningForm.用途列表.length - 1" 
                  @click="addUsageItem" 
                  class="ml-2 text-blue-500 hover:text-blue-700"
                >
                  添加
                </button>
                <span v-if="index < landPlanningForm.用途列表.length - 1">、</span>
              </div>
            </div>
            
            <div class="ml-4 pl-4 text-blue-800 mt-3">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="landPlanningForm.位于保护区" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">位于保护区：</label>
              </div>
              
              <p class="mt-2">
                该批次用地
                <span v-if="landPlanningForm.位于保护区 === '否'">均不位于各级保护区</span>
                <span v-else>
                  位于
                  <InputField v-model="landPlanningForm.保护区名称" placeholder="保护区名称" width="12rem" />
                  保护区，涉及
                  <InputField v-model="landPlanningForm.保护区面积" type="number" step="0.01" min="0" placeholder="面积" width="8rem" />
                  公顷，已经
                  <InputField v-model="landPlanningForm.主管部门" placeholder="主管部门" width="12rem" />
                  同意（批准文号：
                  <InputField v-model="landPlanningForm.保护区批复文号" placeholder="批复文号" width="15rem" />
                  ）
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 复制按钮 -->
    <CopyToClipboard :text="generateCopyText()" />
  </div>
</template>

<style scoped>
/* 已导入公共样式，无需重复定义 */
</style>